<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="showAddDialog">添加</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="oname" placeholder="请输入要搜索的姓名" @input="selectByPage(1)"/>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" style="width: 100%">
          <el-table-column prop="rid" label="ID" width="65px"/>
          <el-table-column prop="owner.oname" label="业主姓名" width="90px"/>
          <el-table-column prop="rtask" label="报修内容" width="100px"/>
          <el-table-column prop="rlocation" label="报修地点" width="180px"/>
          <el-table-column prop="rtime" label="报修时间" width="115px"/>
          <el-table-column prop="rcompleted" label="维修状态" width="95px">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.rcompleted == 0">未完成</el-tag>
              <el-tag type="info" v-else>已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-popover placement="right" :width="400" trigger="hover">
                <template #reference>
                  <el-button size="small" type="success"
                             :disabled="scope.row.rcompleted === 1"
                             @click="showSetRepairPersonnelDialog(scope.row.rid)">分配员工
                  </el-button>
                </template>
                <el-table :data="scope.row.personnels">
                  <el-table-column property="pid" label="维修人员ID"/>
                  <el-table-column property="pname" label="维修人员姓名"/>
                  <el-table-column property="department.dname" label="所属部门"/>
                </el-table>
              </el-popover>
              <el-button size="small" type="primary" @click="selectByrid(scope.row.rid)"
                         :disabled="scope.row.rcompleted === 1">修改
              </el-button>
              <el-popconfirm title="报修已完成?" confirm-button-text="确认" cancel-button-text="取消"
                             @confirm="deleteByRid(scope.row.rid)">
                <template #reference>
                  <el-button size="small" type="danger" :disabled="scope.row.rcompleted === 1">已完成</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top:20px ;">
          <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                         :page-size="pageInfo.pageSize" @change="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!--添加报修任务对话框开始 -->
  <el-dialog v-model="addDialogShow" title="添加报修" width="500">
    <el-form>
      <el-form-item label="业主名称" label-width="25%">
        <el-select v-model="repairAdd.oid" placeholder="请选择业主姓名" style="width: 300px">
          <el-option v-for="(owner, index) in ownerList" :key="index"
                     :label="`(${owner.oid})&nbsp&nbsp&nbsp&nbsp${owner.oname} `"
                     :value="owner.oid"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报修内容" label-width="20%">
        <el-input v-model="repairAdd.rtask" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="报修地点" label-width="20%">
        <el-input v-model="repairAdd.rlocation" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="报修时间" label-width="20%">
        <el-date-picker v-model="repairAdd.rtime" type="date" placeholder="请选择报修日期" format="YYYY-MM-DD"
                        style="width: 300px" value-format="YYYY-MM-DD"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--添加报修任务对话框结束 -->
  <!--修改报修任务对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改报修任务" width="500">
    <el-form>
      <el-form-item label="业主名称" label-width="25%">
        <el-select v-model="repairUpdate.oid" placeholder="请选择业主姓名" style="width: 300px">
          <el-option v-for="(owner, index) in ownerList" :key="index"
                     :label="`(${owner.oid})&nbsp&nbsp&nbsp&nbsp${owner.oname} `"
                     :value="owner.oid"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报修内容" label-width="20%">
        <el-input v-model="repairUpdate.rtask" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="报修地点" label-width="20%">
        <el-input v-model="repairUpdate.rlocation" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="报修时间" label-width="20%">
        <el-date-picker v-model="repairUpdate.rtime" type="date" placeholder="请选择入职日期" format="YYYY-MM-DD"
                        style="width: 300px" value-format="YYYY-MM-DD"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改报修任务对话框结束 -->
  <!--分配维修人员对话框开始 -->
  <el-dialog v-model="setRepairPersonnelDialogShow" title="分配员工">
    <el-transfer v-model="selectedPids" :data="allRepairpersonnel"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="setRepairPersonnelDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insertRidAndPid">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--分配维修人员对话框结束 -->
</template>

<script setup>
import ownerApi from '@/api/ownerApi';
import repairApi from '@/api/repairApi';
import {ref} from 'vue';
import {ElLoading, ElMessage} from 'element-plus';

const ownerList = ref([])
//用于搜索姓名关键字
const oname = ref('');
//用于分页
const pageInfo = ref({
  total: 0,
  pageSize: 0,
});
//被添加报修任务信息
const repairAdd = ref({
  oid: '',
  rtask: '',
  rlocation: '',
  rtime: '',
  rcompleted: 0,
});
const repairUpdate = ref({
  oid: '',
  rtask: '',
  rlocation: '',
  rtime: '',
  rcompleted: 0,
});
const setRepairPersonnelDialogShow = ref(false);
//用于部门列表
//用于添加报修任务对话框
const addDialogShow = ref(false);
const updateDialogShow = ref(false);
const allRepairpersonnel = ref([]);
const selectedPids = ref([]);
//需要分配维修人员项目的id
const selectedRid = ref(0);

//查询所有员工信息并显示分配员工的对话框
function showSetRepairPersonnelDialog(rid) {
  repairApi.allRepair(rid)
      .then(resp => {

        allRepairpersonnel.value = resp.data.allRepairpersonnel;
        selectedPids.value = resp.data.selectedPids;
        selectedRid.value = rid;
        setRepairPersonnelDialogShow.value = true;
      });
}

//分配员工
function insertRidAndPid() {
  repairApi.insertRidAndPid(selectedRid.value, selectedPids.value)
      .then(resp => {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });

        setRepairPersonnelDialogShow.value = false;
      });
}

function selectByPage(pageNum) {
  repairApi.selectByPage(pageNum, oname.value)
      .then(resp => {
        pageInfo.value = resp.data;
      });
}

function showAddDialog() {
  ownerApi.selectAll()
      .then(resp => {
        ownerList.value = resp.data;
        addDialogShow.value = true;
      })
}

//添加
function insert() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中~~~',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  repairApi.insert(repairAdd.value)
      .then(resp => {
        loading.close()
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1200
          });
          addDialogShow.value = false;

          repairAdd.value = {
            oid: '',
            rtask: '',
            rlocation: '',
            rtime: '',
            rcompleted: 0,
          }
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 2000
          });
        }
      });
}

//删除
function deleteByRid(rid) {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中~~~',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  repairApi.delete(rid)
      .then(resp => {
        loading.close()
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1200
          });
          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 2000
          });
        }
      });
}

function update() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中~~~',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  repairApi.update(repairUpdate.value)
      .then(resp => {
        loading.close()
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1200
          });
          updateDialogShow.value = false;

          selectByPage(pageInfo.value.pageNum);
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 2000
          });
        }
      });
}

function selectByrid(rid) {
  repairApi.selectByRid(rid)
      .then(resp => {
        repairUpdate.value = resp.data;
        ownerApi.selectAll()
            .then(resp => {
              ownerList.value = resp.data;
            })
        updateDialogShow.value = true;
      });
}

//默认查询首页
selectByPage(1);
</script>

<style scoped></style>